<template>
	<view class="main">
		<u-navbar
			title="内返产品"
			:title-size="26"
			title-color="#FFF"
			:border-bottom="false"
			:is-fixed="true"
			custom-class="home-bg"
			:background="{backgroundColor: '#66a6ff'}"
			:isBack="false"
		>
		</u-navbar>
		<swipers :pid="1" height="322rpx" padding="20rpx 20rpx 0"></swipers>
		<!-- 资讯 -->
		<navigator v-if="news.length" class="information bg-white row ml20 mr20 mt20" hover-class="none"
			open-type="navigate" url="/pages/news_list/news_list">
			<image class="icon-toutiao" src="/static/images/icon_toutiao.png"></image>
			<text class="gap-line"></text>
			<view class="news flex1">
				<view class="shade"></view>
				<swiper autoplay="true" style="height: 76rpx; flex: 1" vertical="true" circular="true"
					:interval="3000">
					<swiper-item v-for="(item, index) in news" :key="index" class="row">
						<view class="flexnone">
							<u-tag v-if="item.is_new" shape="circle" text="最新" size="mini" type="primary"
								mode="plain" />
						</view>
						<view class="text-swiper ml10 line1">{{item.title }}</view>
					</swiper-item>
				</swiper>
			</view>
			<image class="icon-sm ml20" src="/static/images/arrow_right.png" />
		</navigator>
		
		<view class="product-display-area">
			<view class="product-item bg-white u-margin-20" v-for="(v,k) in prodctData" :key="k">
				<view class="product-class-title" v-html="v.name"></view>
				<view class="product-lists row wrap">
					<view class="product" v-for="(val,key) in v.product" :key="key" @click="goPage(val.url,val.open_type)">
						<image :src="val.image + '?imageView2/1/w/50/h/50/format/webp/q/80'" mode="widthFix" class="icon"></image>
						<view class="xs mt10" v-html="val.title"></view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<hint-buy-vip-message ref="hintBuyVip"></hint-buy-vip-message>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getProductData
	} from '@/api/store';
	import {
		getHome
	} from '@/api/store';
	import {
		toLogin
	} from '@/utils/login'
	import {
		getUser
	} from '@/api/user';
	import Cache from '@/utils/cache'
	const app = getApp()
	export default {
		data() {
			return {
				scrollTop: 0,
				currentSwiper: 0,
				news: [],
				prodctData:[]
			}
		},
		async onLoad(options) {
			var _this = this;
			getProductData({
				type:1
			}).then(res => {
				if(res.code == 1){
					_this.prodctData = res.data
				}
			})
			getHome().then(res => {
				if(res.code == 1){
					_this.news = res.data.news
				}
			})
			
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			if(!this.enable) return
			let percent = scrollTop / top
			this.navBg = percent > 1 ? 1 : percent
			this.scrollTop = scrollTop
		},
		methods: {
			isURL(url) {
			　　
			　　const strRegex = '^((https|http|ftp)://)?'//(https或http或ftp):// 可有可无
			　　+ '(([\\w_!~*\'()\\.&=+$%-]+: )?[\\w_!~*\'()\\.&=+$%-]+@)?' //ftp的user@ 可有可无
			　　+ '(([0-9]{1,3}\\.){3}[0-9]{1,3}' // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
			　　+ '|' // 允许IP和DOMAIN（域名）
			　　+ '(localhost)|'    //匹配localhost
			　　+ '([\\w_!~*\'()-]+\\.)*' // 域名- 至少一个[英文或数字_!~*\'()-]加上.
			　　+ '\\w+\\.' // 一级域名 -英文或数字 加上.
			　　+ '[a-zA-Z]{1,6})' // 顶级域名- 1-6位英文
			　　+ '(:[0-9]{1,5})?' // 端口- :80 ,1-5位数字
			　　+ '((/?)|' // url无参数结尾 - 斜杆或这没有
			　　+ '(/[\\w_!~*\'()\\.;?:@&=+$,%#-]+)+/?)$';//请求参数结尾- 英文或数字和[]内的各种字符
			　　const re = new RegExp(strRegex, 'i'); // 大小写不敏感
			　　if (re.test(encodeURI(url))) {
			　　　　return true;
			　　}
			　　return false;
			},
			goPage(url,open_type) {
				
				if (!this.isLogin) return toLogin();
				uni.showLoading({
					title: '加载中'
				});
				getUser().then(res => {
					uni.hideLoading();
					if(res.code == 1){
						if(open_type == 1){
							uni.navigateTo({
								url:url
							})
						}else if(open_type == 2 || open_type == 3){
							if(this.isURL(url)){
								// #ifdef APP
									uni.navigateTo({
									  url: "/pages/webview/webview?url=" + url,
									});
								// #endif
								// #ifndef APP
									window.location.href = url;
								// #endif
							}else{
								uni.navigateTo({
									url:url,
									fail(e) {
										console.log(e)
									}
								})
							}
						}
					}else{
						this.$refs.uToast.show({
							title: '系统错误，请稍后重试',
							type: 'error'
						})
					}
				})

			},
		}
	}
</script>

<style lang="scss">

	.main {
		background-size: 100% 400px;
		background-image: linear-gradient(to bottom, #66a6ff 30%, #89f7fe 70%, #F6F6F6);
		background-repeat: no-repeat;
		position: relative;
		z-index: 9;
	
		.information {
			height: 76rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;
	
			.news {
				position: relative;
	
				.shade {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 100;
				}
			}
	
			.icon-toutiao {
				width: 114rpx;
				height: 34rpx;
	
			}
	
			.gap-line {
				height: 28rpx;
				width: 1px;
				background-color: #DCDDDC;
				margin: 0 30rpx;
			}
		}
		
		.product-display-area{
			
			.product-item{
				
				border-radius: 5px;
				.product-class-title{
					padding: 15px;
					border-bottom: 1px solid #F5F5F5;
				}
				
				.product-lists{
					padding: 20rpx 0;
					
					.product{
						padding: 16rpx 0;
						text-align: center;
						width: calc(100% / 3);
						
						.icon{
							width: 32px;
							height: 32px;
							// border: 2rpx solid #F5F5F5;
						}
						
						.title{
							color: #333;
							height: 56rpx;
							font-weight: normal;
							padding-top: 16rpx;
						}
					}
				}
			}
		}
	}
</style>
